<!DOCTYPE html>
<html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="origin-trial" content="AnnZaSfBggcmPxgNMYPXgW7tVBy3HoIkgSysHge4o7QT7U/n3Sr89HvKuJwNtPxgZ9Z/cs6TzbUy6F+glrMQngIAAABZeyJvcmlnaW4iOiJodHRwczovL2dvbmF0aXZlY2xpZW50LmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJQTmFDbCIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
  <title>Rotating Cube</title>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
  <link href="/static/css/out/site.css" rel="stylesheet">
  <script type="text/javascript" src="example.js"></script>
</head>
<body class="demo">

  <header>
    <h1>Rotating Cube</h1>
  </header>

  <section>
    <div class="intro">
      <p>
        An example showing rendering via OpenGLES2 in a Native Client module.
      </p>
      <p class="note">
        Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/api/graphics_3d</tt>).
      </p>
      <p class="note">
        FPS: <span id="fps">0</span>
      </p>

      <div class="panel panel-info">
        <h2>Controls</h2>
        <div class="panel-body">
          <table id="config" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td class="name">X Angle:</td>
                <td class="value">
                  <input type="range" id="xAngle" min="0" max="360" step="1"
                      value="0">
                </td>
              </tr>
              <tr>
                <td class="name">Y Angle:</td>
                <td class="value">
                  <input type="range" id="yAngle" min="0" max="360" step="1"
                      value="0">
                </td>
              </tr>
              <tr>
                <td class="name">Animating:</td>
                <td class="value">
                  <label>
                    off
                    <input type="radio" id="animateOff" value="false">
                  </label>
                  <label>
                    on
                    <input type="radio" id="animateOn" value="true"
                        checked="true">
                  </label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="Demo-body">
      <div id="listener" class="Demo-content"></div>
    </div>

    <div id="loading-cover">
      <div id="message">
        <div id="statusField"></div>
          <div id="progress" class="progress progress-striped active">
            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
  </div>
</body>
</html>
